<template>
  <div id="app">
    <div
      id="micBtn"
      class="micBtn"
      :class="isActive ? 'active' : 'closeMic'"
      @click="musicFn()"
    >
      <audio
        id="audio"
        preload="auto"
        src="https://nbd-luyan-1252627319.cos.ap-shanghai.myqcloud.com/nbd-console/95f1929133c0e49d7738e13da8413c7f.mp3"
        loop="loop"
        autoplay="autoplay"
      ></audio>
    </div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<script>
import shareInfo from '@/assets/js/weixinShare.js';
import wx from 'weixin-js-sdk';
export default {
  data() {
    return {
      flag: true,
      isActive: true,
    };
  },
  mounted() {
    document.getElementById('audio').play();
    wx.ready(function() {
      document.getElementById('audio').play();
    });
    this.autoPlayMusic();
    document.body.addEventListener('touchstart', this.musicFn);
  },
  methods: {
    musicFn() {
      const that = this;
      document.getElementById('audio').play();
    },
    autoPlayMusic() {
      console.log('开始');
      let that = this;
      // 自动播放音乐效果，解决浏览器或者APP自动播放问题
      function musicInBrowserHandler() {
        if (that.flag) {
          that.flag = false;
          document.getElementById('audio').play();
        }

        document.body.removeEventListener('touchstart', musicInBrowserHandler);
      }
      document.body.addEventListener('touchstart', musicInBrowserHandler);

      // 自动播放音乐效果，解决微信自动播放问题
      function musicInWeixinHandler() {
        // musicPlay(true);
        if (that.flag) {
          that.flag = false;
          document.getElementById('audio').play();
        }
        document.addEventListener(
          'WeixinJSBridgeReady',
          function() {
            // musicPlay(true);
            if (that.flag) {
              that.flag = false;
              document.getElementById('audio').play();
            }
          },
          false
        );
        document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
      }
      document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
    },
  },
};
</script>

<style lang="scss">
aside {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  top: 0;
  left: 0;
  .wx-img {
    width: 50%;
    margin: 40px auto 0;
    display: block;
  }
  .text {
    color: #fff;
    font-size: 0.38rem;
    width: 80%;
    text-align: center;
    display: block;
    margin: 180px auto 0;
  }
  .box {
    width: 588px;
    height: 477px;
    background: url(./assets/imgs/bg.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .closeBtn {
      width: 90%;
      height: 1.2rem;
      left: 5%;
      position: absolute;
      bottom: 0.5rem;
    }
  }
}
html {
  // background-color: #0b0c27;
  margin: auto;
  font-size: 10vw;
  max-width: $maxWidth;
  background: #09035b;
  @include MaxWidth() {
    font-size: calc((#{$maxWidth} - 17px) / 10);
  }
}
body {
  background: #09035b;
  margin: auto;
  max-width: $maxWidth;
  margin: 0 auto;
  // background: #002d92 url('./assets/imgw/bg.jpg') no-repeat fixed;
  // position: relative;
  // background-attachment: fixed;
  // background-size: 100% auto;
  // background-position: 0 88px;
  -webkit-overflow-scrolling: auto;
  /* overflow-x: hidden;
    overflow-y: scroll; */
}
#app {
  // height: 100%;
  max-width: 540px;
}
.micBtn {
  position: fixed;
  background: url(https://nbd-luyan-1252627319.cos.ap-shanghai.myqcloud.com/nbd-console/dd8257dbf79a06d55f9a8c1cfdec06f0.png)
    no-repeat;
  background-size: 100% 100%;
  width: 0.8rem;
  height: 0.8rem;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 100;
  &.active {
    -webkit-animation: mymove 5s linear infinite;
  }
}
.closeMic {
  background: url(https://nbd-luyan-1252627319.cos.ap-shanghai.myqcloud.com/nbd-console/b3f55a66c64439193a832897e1e71563.png)
    no-repeat;
  background-size: 100% 100%;
}
@-webkit-keyframes mymove {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
.article-pic {
  width: 100%;
  display: block;
  margin-bottom: 100px;
}
</style>
